<script lang='ts' setup>
//@ts-nocheck
const tableData = ref([])
import { GetSemester, DelSemester, AddSemester, UpdateSemester } from '@/api/request.js'
const route = useRoute()
const academicYear = ref()
const term = ref()
const id = ref()
const academicYear2 = ref()
const term2 = ref()
const id2 = ref()
const table = ref(false)
const jwtToken = localStorage.getItem('jwtToken')
onMounted(async () => {
	let res = await GetSemester(jwtToken)
	console.log(res.data.data);
	tableData.value = res.data.data
})
const Delete = async (scope) => {
	console.log("delete", scope);

	let res = await DelSemester(jwtToken, scope.row.id)
	if (res.status == 200) {
		ElMessage({
			message: '删除成功',
			type: 'success',
		})
		tableData.value.splice(scope.$index, 1);
		//location.reload()
	}
	else
		ElMessage.error('删除失败')
	console.log(res);
}
const update = async () => {
	const data = {
		academicYear: academicYear.value,
		term: term.value,
		id: id.value
	}
	console.log(data);

	let res = await AddSemester(jwtToken, data);
	console.log("提交的结果", res);
	location.reload()
}
const change = async (scope) => {
	tableData.value[scope.row.$index]
	const data = {
		academicYear: academicYear2.value,
		term: term2.value,
		id: id2.value
	}
	console.log(data);

	let res = await UpdateSemester(jwtToken, data);
	console.log("修改的结果", res);
	//location.reload()
}
</script>
<template>
	<el-button text @click="table = true" type="success">点击手动上传</el-button>
	<el-drawer v-model="table" title="手动添加学期" direction="rtl" size="50%">
		<span><el-input v-model="academicYear" placeholder="请输入学年" /></span><br><br>
		<span><el-input v-model="term" placeholder="请输入学期" /></span><br><br>
		<span><el-input v-model="id" placeholder="请输入id" /></span><br><br>
		<el-button @click="update">提交</el-button>
	</el-drawer>
	<div id="left">
		<el-table :data="tableData" style="width: 100%" :edit="true">
			<el-table-column prop="academicYear" width="300" label="学年">
			</el-table-column >
			<el-table-column prop="term" width="300" label="学期">
			</el-table-column>
			<el-table-column prop="updateTime" label="更新时间">
			</el-table-column>
			<el-table-column label="删除" width="100">
				<template #default="scope">
					<el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"
						icon-color="#626AEF" title="确定删除吗?" @confirm="Delete(scope)">
						<template #reference>
							<el-button size="small" type="danger">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
			<el-table-column label="修改">
				<template #default="scope">
					<el-button size="small" @click="change(scope)" type="success">修改学期</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<div id="right">

	</div>
</template>

<style scoped lang='scss'>
span {
	margin-top: 10px;
}
</style>